<template>
	<view class="view-modal" :class="[modalAnimation?'ani_start':'ani_end']">
		<view class="sheet-view" :class="[modalAnimation?'ani-top':'ani-btm']">
			<view class="head-view">
				<view class="cancel-view" @click="cancelAction">
					<text>取消</text>
				</view>
				<view class="title-view">
					<text>{{sheetTitle}}</text>
				</view>
				<view class="ok-view" @click="okAction">
					<text>确定</text>
				</view>
			</view>
 
			<picker-view :indicator-style="indicatorStyle" :value="selValue" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in dataList" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in dataList[col1Index].list" :key="index">{{item.name}}
					</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in dataList[col1Index].list[col2Index].list" :key="index">
						{{item.name}}
					</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>
 
<script>
	export default {
		name: "uniRegionSheet",
		data() {
			return {
				viewTitle: null,
				modalAnimation: false,
				indicatorStyle: `height: 50px;`,
				selValue: [0, 0, 0],
				col1Index: 0,
				col2Index: 0,
				col3Index: 0,
	      dataList:[{
					"name": "上海市",
					"list": [{
						"name": "上海市",
						"list": [{
							"name": "黄浦区"
						}, {
							"name": "徐汇区"
						}, {
							"name": "长宁区"
						}, {
							"name": "静安区"
						}, {
							"name": "普陀区"
						}, {
							"name": "虹口区"
						}, {
							"name": "杨浦区"
						}, {
							"name": "闵行区"
						}, {
							"name": "宝山区"
						}, {
							"name": "嘉定区"
						}, {
							"name": "浦东新区"
						}, {
							"name": "金山区"
						}, {
							"name": "松江区"
						}, {
							"name": "青浦区"
						}, {
							"name": "奉贤区"
						}, {
							"name": "崇明区"
						}]
					}]
				}],
			};
		},
		props: {
			showSheetView: {
				type: Boolean,
				default: false
			},
			defaultIndexs: {
				type: Array,
				default: 0
			},
			sheetTitle: {
				type: String,
				default: "请选择"
			}
		},
		created() {
			this.viewTitle = this.sheetTitle
			this.selValue = this.defaultIndexs
 
			this.col1Index = this.selValue[0]
			this.col2Index = this.selValue[1]
			this.col3Index = this.selValue[2]
		},
		computed: {},
		watch: {
			showSheetView: {
				handler: function(flag) {
					this.modalAnimation = flag
				},
				immediate: true
			}
		},
		methods: {
			cancelAction: function() {
				this.modalAnimation = false
				let self = this
				setTimeout(() => {
					self.$emit('onSelected', {
						'cancel': true
					})
				}, 350);
			},
			okAction: function() {
				this.modalAnimation = false
				let p = this.dataList[this.col1Index].name
				let c = this.dataList[this.col1Index].list[this.col2Index].name
				let a = this.dataList[this.col1Index].list[this.col2Index].list[this.col3Index].name
				
				let self = this
				setTimeout(() => {
					self.$emit('onSelected', {
						data: {province:p,city:c,area:a,text:p+c+a},
						'cancel': false,
						'confirm': true
					})
				}, 350);
			},
			bindChange: function(e) {
				const val = e.detail.value
				this.col1Index = val[0]
				this.col2Index = val[1]
				this.col3Index = val[2]
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.ani_start {
		animation: animationShow 0.4s;
	}
 
	.ani_end {
		animation: animationHide 0.4s;
	}
 
	@keyframes animationShow {
		from {
			background-color: rgba(0, 0, 0, 0);
			opacity: 0;
		}
 
		to {
			background-color: rgba(0, 0, 0, 0.2);
			opacity: 1;
		}
	}
 
	@keyframes animationHide {
		from {
			background-color: rgba(0, 0, 0, 0.2);
			opacity: 1;
		}
 
		to {
			background-color: rgba(0, 0, 0, 0);
			opacity: 0;
		}
	}
 
	@keyframes slideBottom {
		0% {
			transform: translateY(100%)
		}
 
		100% {
			transform: translateY(0)
		}
	}
 
	.picker-view {
		width: 100%;
		height: 540upx;
	}
 
	.item {
		line-height: 100rpx;
		text-align: center;
	}
 
 
	.view-modal {
		position: fixed;
		top: calc(var(--status-bar-height) + 44px);
		// bottom: 0;
		height: calc(100% - var(--status-bar-height) - 44px);
		width: 100%;
		z-index: 1;
 
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2);
	}
 
	.ani-btm {
		transform: translateY(640upx);
	}
 
	.ani-top {
		animation: slideBottom 0.4s;
	}
 
 
	.sheet-view {
		position: absolute;
		bottom: 0upx;
		height: 640upx;
		width: 100%;
		transition: all 0.25s;
		background-color: white;
 
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
 
	.head-view {
		position: relative;
		width: calc(100% - 70upx);
		height: 100upx;
 
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
 
	.cancel-view {
		position: relative;
		width: 124upx;
		height: 100%;
 
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
 
		text {
			position: relative;
			width: 100%;
			font-size: 32upx;
			color: #333333;
 
			text-align: left;
		}
	}
 
	.title-view {
		position: relative;
		height: 100%;
 
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
 
		text {
			position: relative;
			width: 100%;
			font-size: 30upx;
			color: #999999;
 
			text-align: left;
		}
	}
 
	.ok-view {
		position: relative;
		width: 124upx;
		height: 100%;
 
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
 
		text {
			position: relative;
			width: 100%;
			font-size: 32upx;
			color: #2197FF;
 
			text-align: right;
		}
	}
 
	.mid-view {
		position: relative;
		width: 100%;
		height: 106upx;
 
		border-bottom: 1upx solid rgb(235, 235, 235);
		border-top: 1upx solid rgb(235, 235, 235);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
 
	.btn-view {
		position: relative;
		width: 50%;
		height: 100%;
 
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
 
	.tt-view {
		position: relative;
		width: 100%;
		height: 100%;
 
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
 
	.normal-text {
		position: relative;
		width: 100%;
		font-size: 32upx;
		color: #555555;
		text-align: center;
	}
 
	.hili-text {
		position: relative;
		width: 100%;
		font-size: 32upx;
		color: #2197FF;
		text-align: center;
	}
 
	.active {
		background-color: white;
	}
 
	.non-active {
		background-color: rgb(245, 245, 245);
	}
</style>